<template>
	<view class="page">
		<view class="my-top">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
				<view class="portrait">
					<image v-show="scrollTop>20"
						src="//img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png">
					</image>
				</view>
				<view class="title">
					<text v-show="scrollTop>20">我的</text>
				</view>

			</view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="userInfo.avatar">
				<view class="portrait">
					<image
						:src="userInfo.avatar">
					</image>
				</view>
				<view class="info"  >
					<view class="nickname" >
						<text >{{ userInfo.nickname }}</text>
						<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">请登录</button> -->
					</view>
					<text>{{ userInfo.mobile }}</text>
				</view>
			</view>
			
			<view class="user-info" v-else>
				<view class="portrait">
					<image
						src="">
					</image>
				</view>
				
				<view class="info"  >
					<view class="nickname">
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">请登录</button>
					</view>
				</view>
			</view>
			<!-- 收藏区 -->
			<view class="focus-area">
				<view class="list" @click="onWallet('wallet')">
					<view class="num">
						<text>{{userInfo.banlace}}</text>
					</view>
					<view class="title">
						<text>钱包</text>
					</view>
				</view>
				<view class="list" @click="onWallet('integral')">
					<view class="num">
						<text>{{userInfo.unit}}</text>
					</view>
					<view class="title">
						<text>积分</text>
					</view>
				</view>
				<view class="list" @click="onCollect('goods')">
					<view class="num">
						<text>{{userInfo.collectionNum}}</text>
					</view>
					<view class="title">
						<text>收藏</text>
					</view>
				</view>
			</view>
			<!-- 会员 -->
			<view class="vip-info" @click="onMmeberVip">
				<view class="vip">
					<text>周壹淘会员</text>
				</view>
				<view class="vip-btn">
					<text>立即查看</text>
				</view>
			</view>
		</view>
		<!-- 全部订单 -->
		<view class="order-info">
			<view class="text">
				<text style="font-size: 36rpx; font-weight: bold;">商城订单</text>
				<text style="color: #959595;" @click="onSkipOrder(1)">全部订单></text>
			</view>
			<view class="order-list">
				<view class="list" @click="onSkipOrder(1)">
					<view class="icon">
						<text class="iconfont icon-daifukuan"></text>
						<text class="num" v-if="Pendingpayment>0">{{Pendingpayment}}</text>
					</view>
					<view class="title">
						<text>待付款</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(2)">
					<view class="icon">
						<text class="iconfont icon-daifahuo"></text>
						<text class="num" v-if="Pendingshipment>0">{{Pendingshipment}}</text>
					</view>
					<view class="title">
						<text>待发货</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(3)">
					<view class="icon">
						<text class="iconfont icon-daishouhuo"></text>
						<text class="num" v-if="Pendingreceiptgoods>0">{{Pendingreceiptgoods}}</text>
					</view>
					<view class="title">
						<text>待收货</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(7)">
					<view class="icon">
						<text class="iconfont icon-daipingjia"></text>
						<text class="num" v-if="Tobeevaluated>0">{{Tobeevaluated}}</text>
					</view>
					<view class="title">
						<text>待评价</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(5)">
					<view class="icon">
						<text class="iconfont icon-tuikuan"></text>

					</view>
					<view class="title">
						<text>退换</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text style="font-size: 36rpx; font-weight: bold; color: #212121;">我的服务</text>
			</view>
			<view class="service-list">
				<view class="list" v-if="" @click="show1=true">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/zhongxin-shangjiazhongxin.png">
						</image>
					</view>
					<view class="name">
						<text>商家中心</text>
					</view>
				</view>
				<view class="list" v-if="" @click="agent">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/quyudaili.png"></image>
					</view>
					<view class="name">
						<text>区域代理</text>
					</view>
				</view>
				<view class="list" @click="order1">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/jingjia.png"></image>
					</view>
					<view class="name">
						<text>拍卖订单</text>
					</view>
				</view>
				<view class="list" @click="order2">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/dingdan.png"></image>
					</view>
					<view class="name">
						<text>鉴定订单</text>
					</view>
				</view>
				<view class="list" @click="onMessage">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/xiaoxizhongxin.png"></image>
					</view>
					<view class="name">
						<text>消息中心</text>
					</view>
				</view>
				<view class="list" @click="onServer('bank')">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/yinhangka.png"></image>
					</view>
					<view class="name">
						<text>银行卡</text>
					</view>
				</view>
				<view class="list" @click="show = true">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/shipinhaoshipin.png"></image>
					</view>
					<view class="name">
						<text>视频号</text>
					</view>
					
				</view>
				<view class="list" @click="makePhoneCall">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/kefu.png"></image>
					</view>
					<view class="name">
						<text>平台客服</text>
					</view>
				</view>
				<view class="list" @click="onServer('feedback')">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/guanyuwomen.png"></image>
					</view>
					<view class="name">
						<text>关于我们</text>
					</view>
				</view>
				<view class="list" @click="onSetting">
					<view class="thumb">
						<image src="http://192.168.1.2:8360/static/wximg/static/tool/xitongshezhi.png"></image>
					</view>
					<view class="name">
						<text>系统设置</text>
					</view>
				</view>

			</view>
		</view>
		<!-- 客服热线 -->
		<view class="serve-hotline" @click="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
				<view class="cu-dialog">
					<view class="contact-list">
						<view class="list">
							<text>呼叫客服</text>
						</view>
						<view class="list">
							<text style="color: #959595;">400-800-900</text>
						</view>
						<view class="list">
							<text>取消</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- //打开视频号弹框 -->
		<u-popup class="u-popup" style="margin: 30rpx;" :show="show" :round="10" mode="center" @open="open">
			<view class="popup-content">
				<text class="text">即将打开“周壹淘”视频号视频</text>
				<view class="button-container">
					<view class="button cancel-button" @click="handleCancel">取消</view>
					<view class="button confirm-button" @click="handleConfirm">允许</view>
				</view>
			</view>
		</u-popup>
		<!-- 商家中心 -->
		<u-popup class="u-popup" style="margin: 30rpx;" :show="show1" :round="10" mode="bottom" @open="open1">
			<view class="popup-content1">
				
				<view v-for="el in userStoreList" v-if="el.isshow" class="button1 confirm-button1" @click="showStoreList(el.id,el.path)">
					{{el.name}}
				</view>
				
				<!-- <view class="button1 confirm-button1" @click="hongShanHun">红山魂</view>
				<view class="button1 confirm-button1" @click="yanJiuHui">研究会</view> -->
				<view class="button1 cancel-button1" @click="close1">取消</view>

			</view>
		</u-popup>
		
		<u-popup class="u-popup" style="margin: 30rpx;" :show="show2" :round="10" mode="bottom">
			<view class="popup-content1">
				
				<view v-for="el in storeList" class="button1 confirm-button1" @click="hongShanHun(el)">
					{{el.store_name}}
				</view>
				
				<!-- <view class="button1 confirm-button1" @click="hongShanHun">红山魂</view>
				<view class="button1 confirm-button1" @click="yanJiuHui">研究会</view> -->
				<view class="button1 cancel-button1" @click="show2=false">取消</view>
		
			</view>
		</u-popup>
		<!-- tabbar -->
		<TabBar :tabBarShow="4"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import {
		getLogin,
		getUserStoreList,
		getOrderStatus,
	} from '@/config/api.js';
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				Pendingpayment: 0,
				Pendingreceiptgoods: 0,
				Pendingshipment: 0,
				Tobeevaluated: 0,
				userInfo: {},
				userStoreList:[],
				storeList: [],
				isLoggedIn: false,
				nickname: '',
				store_id: null,
				phone: '',
				gotoUrl:null,
				scrollTop: 0,
				isHotline: false,
				show: false,
				show1: false,
				show2: false,
				goodsList: [{
						id: 1,
						name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
						price: '219.00',
						vip_price: '129.00',
						img: 'http://192.168.1.2:8360/static/wximg/static/img/goods_thumb_01.png',
						is_goods: 0,
					},
					{
						id: 1,
						name: '花花公子 卫衣男秋季圆领薄款休闲体恤男士时尚长袖T恤外套上衣男生情侣装套头衣服秋天男装 白色 XL',
						price: '139.00',
						vip_price: '99.00',
						img: 'http://192.168.1.2:8360/static/wximg/static/img/goods_thumb_02.png',
						is_goods: 1,
					},
					{
						id: 1,
						name: '【两件套】花花公子PLAYBOY短袖T恤男套装夏季新款卫衣男士韩版修身冰丝宽松运动休闲上衣服裤子男装 CYFS903卡其色 XL',
						price: '168.00',
						vip_price: '158.00',
						img: 'http://192.168.1.2:8360/static/wximg/static/img/goods_thumb_03.png',
						is_goods: 1,
					},
					{
						id: 1,
						name: '雪域森林短袖T恤男装2020夏季潮流时尚衣服男潮牌圆领印花宽松T恤半袖男 20855橙色 XL',
						price: '68.00',
						vip_price: '36.00',
						img: 'http://192.168.1.2:8360/static/wximg/static/img/goods_thumb_04.png',
						is_goods: 0,
					},
					{
						id: 1,
						name: '短袖男夏季T恤男装韩版潮流印花套头衣服男士圆领宽松五分袖学生休闲夏天运动时尚情侣装大码 D119白色 XL',
						price: '68.00',
						vip_price: '59.00',
						img: 'http://192.168.1.2:8360/static/wximg/static/img/goods_thumb_05.png',
						is_goods: 0,
					},
					{
						id: 1,
						name: '时尚休闲套装女夏季热天宽松女孩中学生高中初中生女生短袖套装衣服夏天少女学生韩版原宿风T恤潮流裤子一套 绿字母上衣+绿色裤两件套 均码',
						price: '83.00',
						vip_price: '78.00',
						img: 'http://192.168.1.2:8360/static/wximg/static/img/goods_thumb_06.png',
						is_goods: 1,
					},
				],
			};
		},
		onLoad() {
			uni.login({
				provider: 'univerify',
				univerifyStyle: {
					fullScreen: true
				},
				success(res) { // 登录成功
					console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
				},
				fail(res) { // 登录失败
					console.log(res.errCode)
					console.log(res.errMsg)
				}
			})

		},
		mounted() {
			this.checkLogin(); // 组件挂载时检查登录状态
		},
		onShow() {
			uni.hideTabBar();
			uni.getStorageSync('token') && getOrderStatus().then(res => {
				const _this = this;
				this.Pendingpayment = res.Pendingpayment;
				this.Pendingreceiptgoods = res.Pendingreceiptgoods;
				this.Pendingshipment = res.Pendingshipment;
				this.Tobeevaluated = res.Tobeevaluated;
				uni.setStorage({
					key: 'userInfo',
					data: res.userInfo,
					success: function(){
						_this.checkLogin();
					}
				});
				
			})
		},
		onmoduleDcroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			showStoreList(id,path){
				
				this.show1 = false;
				if(id == 2)return uni.navigateTo({
					url: '/moduleD/agent/attract'
				});
				if(id == 3)return uni.navigateTo({
					url: '/moduleD/agent/agent'
				});
				this.show2 = true;
				
				this.gotoUrl = path;
				uni.setStorageSync('pathNavId', id);
				getUserStoreList({id}).then(res => {
					// console.log(res)
					this.storeList = res.data;
				})
			},
			// 代理
			agent() {
				uni.navigateTo({
					url: '/moduleD/agent/agent'
				})


			},
			/**
			 * 关注跳转
			 */
			onCollect(type) {
				switch (type) {
					case 'goods':
						uni.navigateTo({
							url: '/moduleD/GoodsOn/GoodsOn'
						})
						break;
					case 'content':
						uni.navigateTo({
							url: '/moduleD/ContentCollection/ContentCollection'
						})
						break;
					case 'record':
						uni.navigateTo({
							url: '/moduleD/BrowsingHistory/BrowsingHistory'
						})
						break;
				}
			},

			//积分跳转
			onWallet(type) {
				switch (type) {
					case 'integral':
						uni.navigateTo({
							url: '/moduleD/IntegralDetails/IntegralDetails',
						})
						break;

					case 'wallet':
						uni.navigateTo({
							url: '/moduleD/MyWallet/MyWallet',
						})
						break;

				}
			},

			/**
			 * 订单
			 */

			onSkipOrder(type) {
				if (type === 5) {
					uni.navigateTo({
						url: '/moduleD/AfterSalesOrder/AfterSalesOrder',
					})
					return;
				}
				uni.navigateTo({
					url: '/moduleD/MyOrderList/MyOrderList?type=' + type,
				})
			},

			// 拍卖订单鉴定订单
			order1() {
				uni.navigateTo({
					url: '/moduleD/paiMai/paiMai',
				})
			},
			order2() {
				uni.navigateTo({
					url: '/moduleD/jianDing/jianDing',
				})
			},
			//商家中心
			open1() {

			},
			//商家中心
			open2() {
				
			},
			close1() {
				this.show1 = false
				// console.log('close');
			},
			// 视频号
			open() {

			},
			handleConfirm() {
				// 使用uni.navigateTo打开视频号
				// 替换'zhuyitao'为视频号的实际ID
				const videoAccountId = '周壹淘'; // 替换为你的视频号ID
				const url = `https://weixin.qq.com/cgi-bin/frame?t=home&vid=${videoAccountId}`; // 微信视频号的URL格式

				uni.navigateTo({
					url: url,
					success: () => {
						console.log('跳转到视频号成功');
					},
					fail: (err) => {
						console.error('跳转到视频号失败:', err);
					}
				});
			},
			handleCancel() {
				this.show = false
				// console.log('close');
			},
			// 拨打客服电话
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '123456789', // 替换为你要拨打的电话号码
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.error('拨打电话失败:', err);
					}
				});
			},
			/**
			 * 我的服务点击
			 */
			onServer(type) {
				switch (type) {
					case 'feedback':
						uni.navigateTo({
							url: '/moduleD/Feedback/Feedback'
						})
						break;
					case 'bank':
						uni.navigateTo({
							url: '/moduleD/Bank/Bank'
						})
						break;
					case 'serve':
						this.isHotline = true;
						break;
				}
			},
			/**
			 * 设置点击
			 */
			onSetting() {
				uni.navigateTo({
					url: '/moduleD/Setting/Setting'
				})
			},
			/**
			 * 消息点击
			 */
			onMessage() {
				uni.navigateTo({
					url: '/moduleD/Message/Message'
				})
			},
			/**
			 * 会员点击
			 */
			onMmeberVip() {
				uni.navigateTo({
					url: '/moduleD/MembersOpened/MembersOpened',
				})
			},
			//是否登录
			getPhoneNumber(e) {

				getLogin({
					code: e.detail.code
				}).then(res => {
					uni.setStorageSync('token', res.token)
					uni.setStorage({
						key: 'userInfo',
						data: res.userInfo,
					});
					
					this.checkLogin();
					// this.userInfo = res.userInfo;
				})

				console.log(e.detail) // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno) // 错误码（失败时返回）
			},
			checkLogin() {
				const _this = this;
				let uersInfo = null;
				uni.getStorage({key: 'userInfo',success:function(res){
					uersInfo = res.data;
					const list = [
						{name:'全国古玩城', path: '/moduleD/hongShanHun/hongShanHun', keys: 'isAntique', isshow:false,id: 1},
						{name:'招商经理', path: '', keys: 'isAttract', isshow:false,id: 2},
						{name:'区域代理', path: '', keys: 'isProxy', isshow:false,id: 3},
						{name:'博物馆', path: '', keys: 'isMuseum', isshow:false,id: 4},
						{name:'地摊位', path: '', keys: 'isStall', isshow:false,id: 5},
						{name:'茶城茶叶商户', path: '', keys: 'isTeaStore', isshow:false,id: 6},
						{name:'农副产品', path: '', keys: 'isAgricultural', isshow:false,id: 7},
						{name:'书画室', path: '', keys: 'isPainterStore', isshow:false,id: 8},
						{name:'名人书画家', path: '', keys: 'isPainter', isshow:false,id: 9},
						{name:'拍卖公司', path: '', keys: 'isAuctionOmpany', isshow:false,id: 11},
						{name:'鉴定师', path: '', keys: 'isAppraiser', isshow:false,id: 10},
						{name:'鉴定机构', path: '', keys: 'isAppraiserStore', isshow:false,id: 12},
						{name:'360行商户', path: '', keys: 'isAllLines', isshow:false,id: 13},
					];
					uersInfo && list.forEach(el => {
						el['isshow'] = uersInfo[el['keys']]
					});
					_this.userStoreList = list;
					_this.userInfo = uersInfo;
				}});
				
				// const token = uni.getStorageSync('token'); // 获取 token
				// if (token) {
				// 	this.isLoggedIn = true; // 用户已登录
				// 	this.getUserInfo(); // 获取用户信息
				// } else {
				// 	this.isLoggedIn = false; // 用户未登录
				// }
			},
			getUserInfo() {
				// 模拟获取用户信息
				// 实际上您可能需要通过 API 获取
				// this.userInfo = {
				// 	nickname: '张三',
				// 	phone: '13800000000'
				// };
			},
			login() {
				// 模拟登录
				const token = 'your_token_here';
				uni.setStorageSync('token', token);
				this.isLoggedIn = true;
				this.getUserInfo(); // 登录成功后获取用户信息
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
			},
			logout() {
				uni.removeStorageSync('token'); // 清除 token
				this.isLoggedIn = false; // 设置为未登录
				this.userInfo = {
					nickname: '',
					phone: ''
				}; // 清空用户信息
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				});
			},
			onUserInfo() {
				uni.navigateTo({
					url: '/moduleD/login/login'
				})
			},
			hongShanHun(data) {
				this.show2 = false;
				uni.setStorageSync('pathStoreId', data.id);
				uni.setStorageSync('pathShiChangId', data.store_id);
				uni.navigateTo({
					url: this.gotoUrl
				})
				// 
			},
			yanJiuHui() {

			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';



	//视频号
	.popup-content {
		padding: 40rpx;
		/* 内边距 */
		text-align: center;

		/* 文字居中 */
		.button-container {
			padding-top: 40rpx;
			display: flex;
			justify-content: space-around;
			/* 按钮均匀分布 */
			margin-top: 20rpx;

			/* 按钮与文本的间距 */
			.button {
				width: 150rpx;
				padding: 10rpx 20rpx;
				/* 按钮内边距 */

				/* 边框样式 */
				border-radius: 10rpx;
				/* 圆角 */
				cursor: pointer;
				/* 鼠标指针 */
			}

			.cancel-button {
				background-color: #f6f6f6;
				/* 取消按钮颜色 */
			}

			.confirm-button {
				background-color: limegreen;
				/* 确定按钮颜色 */
			}

		}
	}


	// 商家中心
	.popup-content1 {
		padding: 30rpx;
		/* 内边距 */
		text-align: center;

		.button1 {
			height: 80rpx;
			padding: 10rpx 20rpx;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			border-bottom: 2rpx solid #f6f6f6;
		}

		.cancel-button1 {
			margin-top: 10rpx;
		}

		.confirm-button1 {}


	}
</style>